<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-webkit-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-moz-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        .wrap {
            width: 1000px;
            text-align: center;
            margin: 100px auto 0;
        }

        .wrap h1 {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: 300;
        }

        .word {
            font-weight: 700;
        }

        .typed-cursor {
            opacity: 1;
            -webkit-animation: blink .7s infinite;
            -moz-animation: blink .7s infinite;
            animation: blink .7s infinite;
            display: none;
        }

        .saySection {
            margin-top: 50px;
        }

        .saySection input {
            font-size: 30px;
        }

        .saySection .txtSay {
            padding-left: 10px;
        }

        .saySection .btnSay {
            display: inline-block;
            padding: 0 20px;
            cursor: pointer;
        }
    </style>
    <script src="js/jquery-1.12.2.js"></script>
    <script>
        $(function () {
            // 思路：获取到文本框中输入的值（val()）
            // 然后，把获取到的值 转换成一个一个的字符
            // 从字符集合里面取出下一个值

            // 要跟现有的文本 拼接到一起，然后，再放到 word 里面去

            // 获取展示内容区域
            var $word = $(".word");
            var timer = null;

            $("#btnSay").click(function () {
                // 清空原来的内容
                $word.text("");

                // 清空定时器
                clearInterval(timer);

                // 让光标展示出来
                $(".typed-cursor").show();

                // 1. 获取值
                var val = $("#inValue").val();

                // 判断输入内容的长度
                /*if(val.trim() === "") {
                 val = "红鲤鱼与绿鲤鱼与驴 ";
                 }*/
                val = val || "红鲤鱼与绿鲤鱼与驴";
                /*
                 字符串分割
                 // console.log(val);
                 // var str = "a|b|c|d"
                 // var res = str.split("|");
                 // console.log(res);*/

                // split 作用：分割字符串，返回一个字符串数组
                var valArr = val.split("");
                // 获取到输入内容的长度
                var arrLen = valArr.length; // 3
                // console.log(val);
                // 标志 取出来的是哪个值
                var index = 0;

                timer = setInterval(function () {
                    // 先判断下 index 的值 和 数组长度
                    if (index > arrLen - 1) {
                        // 清空定时器
                        clearInterval(timer);
                        // 让光标隐藏
                        $(".typed-cursor").hide();
                        return;
                    }

                    // 获取当前的内容
                    // var curTxt = $(".word").text();
                    var curTxt = $word.text();
                    // 获取到下一个要展示的字符
                    // curTxt += valArr[index];
                    curTxt = curTxt + valArr[index];

                    // 放到页面里面去
                    $word.text(curTxt);

                    // index++ 为了取出下一个字符
                    index++;
                }, 300);
            });
        });
    </script>
</head>

<body>
<div class="wrap">
    <h1>
        You want to say ： <span class="word"></span><span class="typed-cursor">|</span> ！
    </h1>
    <div class="saySection">
        <input type="text" id="inValue" class="txtSay"/>
        <input type="button" value="Say" id="btnSay" class="btnSay"/>
    </div>
</div>
</body>

</html>
